import {
  INCREMENT,
  DECREMENT,
  INCREMENT_COUNT,
  ADD_STUDENT,
  INFO_UPDATE,
} from "./event-type";

export default {
  // mutations 中的方法中默认会传入一个state的参数, 这个参数就是上面定义的state对象
  [INCREMENT](state) {
    state.count++
  },
  [DECREMENT](state) {
    state.count--
  },
  // 如果在mutations更新数据的时候, 携带一些参数的时候
  [INCREMENT_COUNT](state, count) {
    // 下文的 payload 指 count形参
    // 普通的提交风格接收参数, 这个 payload 就是传入的参数
    // state.count += count

    // 一个包含type属性的对象提交的时候, 这个payload就不是传入的参数了, 而是整个对象
    console.log(count); // {type: "incrementCount", count: 5}
    // 要获得传入的参数, 则是 payload.count
    state.count += count.count
  },

  // 如果参数的个数不是一个的时候, 我们可以传入一个对象
  [ADD_STUDENT](state,student) {
    state.students.push(student)
  },

  
  [INFO_UPDATE](state) {
    // 如果给state中的对象属性修改值, 这个操作是响应式的, 因为修改的属性提前在state种初始化了
    state.info.name = "huixinge";

    // 如果给state中的对象添加新的属性, 这个操作不是响应式的, 因为这个新属性并没有提前在state中初始化
    // state.info["address"] = "jisichang"
    // 如果要想这个操作也变成响应式的话, 就要使用Vue.set(要修改的数组或对象, Number/String, 修改后的值)
    // Vue.set(state.info, "address", "jisichang") 

    // 如果给state中的对象删除属性, 这个操作也不是响应式的
    // delete state.info.id;
    // 如果想要这个操作也变成响应式的话, 就要使用Vue.delete(要修改的数组或对象, Number/String)
    // Vue.delete(state.info, "id")

    // Vue.set() 和 Vue.delete() 这两个方法内部会将 要修改的属性也一起添加到Vue的响应式系统里面了 


    // 如果在mutations中使用异步操作的话, devtools不能监控修改, 那就无法追踪是哪个组件修改了state共享数据
    // 这里使用定时器模拟异步操作
    /* setTimeout(() => {
      state.info.name = "huixinge";
    },1000) */
    // devtools无法监控异步操作修改的state共享数据， 所以vue官方规定异步操作都应该在actions中完成, 同步操作都应该在mutations中完成
  }
}